<template>
	<view class="p-2 bg-white">
		<u-navbar title="账户余额" autoBack placeholder></u-navbar>
		<view class="position-relative"  style="width: 710rpx; height: 272rpx;">
			<image :src="bgUrl" style="width: 100%;height: 100%;"></image>
			<view class="position-absolute left-0 w-100" style="top: 0rpx;">
				<view class="flex align-center justify-between px-5" style="height: 176rpx;">
					<u-image src="/static/user/money.png" width="36" height="36"></u-image>
					<view class="flex flex-column align-center justify-center">
						<view class="font-28" style="color: #FFDCD8;">余额</view>
						<view class="text-white" style="font-size: 44rpx;">￥{{money}}</view>
					</view>
				</view>
				<view class="flex align-center" style="height: 92rpx;">
					<view class="flex align-center justify-center text-white font-30" :class="$u.platform!=='mp'?'w-50':'w-100'"
						@click="$u.route('pages/user/recharge')">充值</view>
					<view v-if="$u.platform!=='mp'" class="flex align-center justify-center w-50 text-white font-30" @click="$u.route('pages/user/withdraw')">提现</view>
				</view>
					
			</view>
			
		</view>
		
		
		<!-- <view class="usertop" :style="{background:'url(' + bgUrl + ') no-repeat'}">
			<view class="flex align-center justify-between px-5" style="height: 176rpx;">
				<u-image src="/static/user/money.png" width="36" height="36"></u-image>
				<view class="flex flex-column align-center justify-center">
					<view class="font-28" style="color: #FFDCD8;">余额</view>
					<view class="text-white" style="font-size: 44rpx;">￥{{money}}</view>
				</view>
			</view>
			<view class="flex align-center" style="height: 92rpx;">
				<view class="flex align-center justify-center text-white font-30" :class="$u.platform!=='mp'?'w-50':'w-100'"
					@click="$u.route('pages/user/recharge')">充值</view>
				<view v-if="$u.platform!=='mp'" class="flex align-center justify-center w-50 text-white font-30">提现</view>
			</view>
		</view> -->

		<view class="flex align-center justify-between mt-4">
			<view class="font-28 font-weight-bold">账户明细</view>
			<view class="ml-auto flex align-center justify-center shaixuan" @click="show=true">
				<view class="mr-1 text-light6 font-30">筛选</view>
				<u-icon name="arrow-down-fill"></u-icon>
			</view>
		</view>
		
		<template v-if="list.length">
			<view class="item  p-2 mt-4" v-for="(item,index) in list" :key="index" @click="$u.route('pages/user/blancedetail',{type:1})">
			     <view class="flex align-center justify-between">
			     	<view class="flex align-center">
			     		<view class="font-28 font-weight-bold">{{item.memo}}</view>
			     	</view>
			     	<view class="font-28 font-weight-bold">{{item.money}}</view>
			     </view>
			     <view class="flex align-center justify-between mt-2">
			     	<view class="font-24 text-light6">余额:￥{{item.after}}</view>
			     	<view class="font-24 text-light9">{{item.createtime}}</view>
			     </view>
			</view>
		</template>
		<template v-else>
			<u-empty marginTop="150"></u-empty>
		</template>


		<u-popup :show="show" mode="top" @close="show=false">
			<view class="" style="height: 170rpx;"></view>
			<view class="p-2 bg-white">
				<view class="font-30 text-main">日期筛选</view>
				<view class="flex align-center mt-2">
					<view class="date flex align-center justify-between px-2" @click="startshow=true">
						<view class="font-30 text-light6">{{$u.timeFormat(start, 'yyyy-mm-dd')}}</view>
						<view class="">
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>

					<view class="font-30 text-main mx-4">~</view>

					<view class="date flex align-center justify-between px-2" @click="endshow=true">
						<view class="font-30 text-light6">{{$u.timeFormat(end, 'yyyy-mm-dd')}}</view>
						<view class="">
							<u-icon name="arrow-down"></u-icon>
						</view>
					</view>
				</view>
				<view class="font-30 text-main mt-2">类型筛选</view>


				<view class="u-demo-block__content mt-2" style="height: 100rpx;">
					<u-subsection :list="subsection" keyName="name" mode="subsection" :current="currentIndex" activeColor="#04BF79"
						inactiveColor="#04BF79" @change="sectionChange"></u-subsection>
				</view>

				<view class="mt-2 flex align-center">
					<view class="w-50 flex align-center justify-center font-30 text-main" style="height: 100rpx;" @click="reset">
						重置
					</view>
					<view class="w-50 flex align-center justify-center text-white"
						style="background: #04BF79;height: 100rpx;" @click="submint">
						确定
					</view>
				</view>
				
				<u-datetime-picker :show="startshow" v-model="start" :maxDate="now" :minDate="min" mode="date" @cancel="startshow=false" @confirm="startconfirm"></u-datetime-picker>
				<u-datetime-picker :show="endshow" v-model="end" :maxDate="now" :minDate="min" mode="date" @cancel="endshow=false" @confirm="endconfirm"></u-datetime-picker>
			</view>
		</u-popup>



	</view>
</template>

<script>
	import {base} from '@/request/env.js'
	export default {
		data() {
			return {
				now: Number(new Date()),
				min:-28800,
				show: false,
				startshow:false,
				endshow:false,
				start:Number(new Date()),
				end:Number(new Date()),
				currentIndex: 0,
				type:'0',
				subsection: [{
					name:'全部',
					type:'0'
				},{
					name:'业务补贴',
					type:'5'
				},{
					name:'充值',
					type:'6'
				},{
					name:'提现',
					type:'2'
				}],
				money:'',
				list:[],
				bgUrl:''
			}
		},
		onLoad() {
		this.bgUrl = base+'/image/blance.png'
		  this.getData()	
		},
		methods: {
			getData(){
				this.$api.user().then(res => {
					if (res.code === 1) {
						this.money = res.data.money
					}
				})
				
				let parmar = {
					type:this.type,
					starday:uni.$u.timeFormat(this.start, 'yyyy-mm-dd'),
					endday:uni.$u.timeFormat(this.end, 'yyyy-mm-dd')
				}
				this.$api.balanceLog(parmar).then(res=>{
					if(res.code === 1){
						this.list = res.data
					}
				})
					
				
			},
			sectionChange(index) {
				this.currentIndex = index;
				this.type = this.subsection[index].type
			},
			startconfirm(e){
				
				this.start = e.value
				this.startshow = false
			},
			endconfirm(e){
				this.end = e.value
				this.endshow = false
			},
			submint(){
				this.show = false
				this.getData()
			},
			reset(){
				this.currentIndex = 0
				this.start = Number(new Date())
				this.end = Number(new Date())
			}
			
		}
	}
</script>

<style>
	.usertop {
		/* background: url(@/static/bg/blance.png) no-repeat; */
		background-size: 100% 272rpx;
		height: 272rpx;
	}

	.shaixuan {
		width: 148rpx;
		height: 72rpx;
		background: #F5F5F5;
		border-radius: 90rpx 90rpx 90rpx 90rpx;
		opacity: 1;
	}

	.item {
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.07);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
	}

	.date {
		width: 292rpx;
		height: 78rpx;
		background: #FFFFFF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 2rpx solid #E8E6E6;
	}
</style>